<template>
  <div>
    <el-row
      type="flex"
      justify="space-between"
      align="center"
      :gutter="20"
      style="width: 100%; margin-bottom: 10px"
    >
      <el-col
        :span="4"
        style="display: flex"
      >
      </el-col>
      <el-col
        :span="12"
        style="display: flex"
      >
        <el-input
          placeholder="请输入内容"
          v-model="camera"
          class="input-with-select"
        >
          <el-select
            v-model="videoRecorderId"
            style="width: 160px"
            placeholder="请选择录像机"
            slot="prepend"
          >
            <el-option
              v-for="item in locoMotoptions"
              :key="item.id"
              :label="item.deviceName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button
            @click="searchHandler"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
        <el-button
          style="margin-left: 1rem"
          type="primary"
          @click="addHandler"
          >新增</el-button
        >
        <el-button
          plain
          @click="resetHandler"
          >重置</el-button
        ></el-col
      >
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          label="封面"
          align="center"
          prop="cover"
        >
          <template slot-scope="scope">
            <el-button type="text">封面</el-button>
          </template></el-table-column
        >
        <el-table-column
          prop="camera"
          label="摄像头名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="videoTags"
          label="视频标签"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="videoMonitorPoint"
          label="视频监控点"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="deviceNo"
          label="设备标识"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="passageNo"
          label="通道号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lineType"
          label="线别"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ptzControl"
          label="云台控制"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.ptzControl == 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="locationKm"
          label="位置信息"
          align="center"
        >
          <template slot-scope="scope">
            <span>DK{{ scope.row.locationKm }}+{{ scope.row.locationM }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="250"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-video-camera"
              circle
            ></el-button>
            <el-button
              icon="el-icon-video-pause"
              circle
            ></el-button>
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="editTitle"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
    >
      <el-form
        :model="editForm"
        label-width="120px"
      >
        <el-form-item label="录像机">
          <el-select
            style="width: 100%"
            v-model="editForm.videoRecorderId"
            placeholder="请选择录像机"
          >
            <el-option
              v-for="item in locoMotoptions"
              :key="item.id"
              :label="item.deviceName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摄像头名称">
          <el-input v-model="editForm.camera"></el-input>
        </el-form-item>
        <el-form-item label="视频标签">
          <el-input v-model="editForm.videoTags"></el-input>
        </el-form-item>
        <el-form-item label="视频监控点">
          <el-input v-model="editForm.videoMonitorPoint"></el-input>
        </el-form-item>
        <el-form-item label="设备标识">
          <el-input v-model="editForm.deviceNo"></el-input>
        </el-form-item>
        <el-form-item label="通道号">
          <el-input v-model="editForm.passageNo"></el-input>
        </el-form-item>
        <el-form-item label="选择线别">
          <el-select
            style="width: 100%"
            v-model="editForm.lineType"
            placeholder="选择线别"
          >
            <el-option
              v-for="item in lineOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="云台控制">
          <el-switch
            style="display: block; margin-top: 0.5rem"
            v-model="editForm.ptzControl"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="editForm.sort"></el-input>
        </el-form-item>

        <el-form-item label="位置信息DK:">
          <el-col :span="8">
            <el-input v-model="editForm.locationKm"></el-input>
          </el-col>
          <el-col
            :span="2"
            style="text-align: center"
          >
            +
          </el-col>
          <el-col :span="8">
            <el-input v-model="editForm.locationM"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSaveHandler"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCameraPage,
  deleteType,
  saveCamera,
  updateCamera,
  getluxiangji,
} from '/src/http/backstageManage/productionSchedue/cameraRecorder/cameraRecorder.js'
import { getDataType } from '/src/http/dictionary.js'
export default {
  data() {
    return {
      dialogVisible: false,

      locoMot: null,
      date: '',
      locoMotoptions: [],
      lineOptions: [],
      videoRecorderId: null,
      camera: null,
      hiddenDangerCategory: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isSearch: false,
      renderData: [],
      companyInput: null,
      // edit
      editTitle: '',
      editDialogStatus: false,
      editForm: {
        videoRecorderId: null,
        camera: null,
        videoTags: '',
        videoMonitorPoint: null,
        deviceNo: null,
        passageNo: null,
        lineType: null,
        ptzControl: null,
        sort: null,
        locationKm: null,
        locationM: null,
      },
    }
  },

  mounted() {
    this.getDataTypeApi()
    this.getDutyListApi()
    this.getLocomotiveListApi()
  },

  methods: {
    getDataTypeApi() {
      getDataType({ type: 'ht_line_type' }).then((res) => {
        if (res.code == 200) {
          this.lineOptions = res.data
        }
      })
    },
    // 搜索
    searchHandler() {
      this.isSearch = true

      console.log(this.pageSize, this.videoRecorderId, this.camera)

      this.getDutyListApi(1, this.pageSize, this.videoRecorderId, this.camera)
    },
    // 重置
    resetHandler() {
      this.videoRecorderId = null
      this.currentPage = 1
      this.pageSize = 10
      this.camera = null
      this.getDutyListApi()
    },
    // 新增
    addHandler() {
      this.editTitle = '新增'
      this.editDialogStatus = true
    },
    //   编辑
    editHandler(v) {
      console.log('edit::: ', v)
      this.editTitle = '编辑'
      // this.companyInput =
      this.editForm = JSON.parse(JSON.stringify(v))
      this.editDialogStatus = true
    },
    // 删除
    deleteHandler(v) {
      console.log('delete::: ', v)
      this.$confirm('此操作将永久删除该摄像机?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteType(v).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.getDutyListApi()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      if (this.isSearch === true) {
        this.getDutyListApi(
          this.currentPage,
          v,
          this.videoRecorderId,
          this.camera
        )
      } else {
        this.getDutyListApi(this.currentPage, v)
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v
      if (this.isSearch === true) {
        this.getDutyListApi(v, this.pageSize, this.videoRecorderId, this.camera)
      } else {
        this.getDutyListApi(v, this.pageSize)
      }
    },
    // editDialog保存
    editSaveHandler() {
      this.editDialogStatus = false
      let params = JSON.parse(JSON.stringify(this.editForm))

      if (this.editTitle === '新增') {
        this.$confirm('确认新增此条信息?', '提示', {
          confirmButtonText: '确定新增',
          cancelButtonText: '取消',
          type: 'info',
        })
          .then(() => {
            this.saveCameraApi(params)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消新增',
            })
          })
      } else {
        this.$confirm('确认编辑此条信息?', '提示', {
          confirmButtonText: '确定编辑',
          cancelButtonText: '取消',
          type: 'info',
        })
          .then(() => {
            this.updateDutyApi(params)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消编辑',
            })
          })
      }
      this.editDialogStatus = false
    },
    /**
     * 接口
     */
    // 查询所有机车列表
    getLocomotiveListApi() {
      getluxiangji().then((res) => {
        console.log('res::: ', res)
        if (res.code == 200) {
          this.locoMotoptions = res.data
        }
      })
    },
    // 分页查询机车-值班人员
    getDutyListApi(
      pageNum = 1,
      pageSize = 10,
      camera = null,
      videoRecorderId = null
    ) {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        camera: this.camera,
        videoRecorderId: this.videoRecorderId,
      }
      console.log('params::: ', params)
      getCameraPage(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 新增
    saveCameraApi(params) {
      saveCamera(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增成功')

          this.getDutyListApi()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 编辑
    updateDutyApi(params) {
      updateCamera(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.dialog) {
  margin-top: 6vh !important;
}
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}

:deep(.el-dialog__title) {
  color: #fff;
}
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
:deep(.el-select .el-input__inner::placeholder) {
  text-align: center;
}
</style>
